import React from 'react'



const Banner = React.createClass({
    getInitialState: function () {
        return{
            color: this.props.option.map(function (item) {
                return item.bg
            }),
            text:this.props.option.map(function (item) {
                return item.id
            }),
            scrollTo:0 
        }
    },
    switch:function (cur) {  
        this.setState({
            scrollTo:cur
        });
    },
    toLeft:function () {
        if(this.state.scrollTo<=0){
            this.setState({
                scrollTo:this.state.text.length-1
            });
        }else{
            this.setState({
                scrollTo:this.state.scrollTo-1
            });
        }
    },
    toRight:function () {
        if(this.state.scrollTo>=this.state.text.length-1){
            this.setState({
                scrollTo:0
            });
        }else{
            this.setState({
                scrollTo:this.state.scrollTo+1
            });
        }
    },
    handleStart:function () {
        this.timer=setInterval(function () {
            if(this.state.scrollTo>=this.state.text.length-1){
                this.setState({
                    scrollTo:0
                });
            }else{
                this.setState({
                    scrollTo:this.state.scrollTo+1
                });
            }
        }.bind(this),4000);
    },
    handleStop:function () {
        clearInterval(this.timer);
    },
    componentDidMount: function () {
        this.timer=setInterval(function () {
            if(this.state.scrollTo>=this.state.text.length-1){
                this.setState({
                    scrollTo:0
                });
            }else{
                this.setState({
                    scrollTo:this.state.scrollTo+1
                });
            }
        }.bind(this),4000);
    },
    render: function () {
        let scroll = {
            width:document.body.clientWidth*this.state.text.length,
            WebkitTransition: "left 1.2s",
            left: -document.body.clientWidth*this.state.scrollTo
        };
        return (
            <div className="banner" style={{height:this.props.bannerHeight}} onMouseOver={this.handleStop} onMouseOut={this.handleStart}>
                <ul ref="scroll" className="scroll" style={scroll}>
                    {
                        this.state.text.map(function (item,key) {
                            return(
                                <li className="bannerItem" style={{backgroundImage:this.state.color[key],width:document.body.clientWidth,lineHeight:this.props.bannerHeight+'px'}}>
                                    {item}
                                </li>
                            )
                        }.bind(this))
                    }
                </ul>
                <p className="tabs">
                    {
                        this.state.text.map(function (item,key) {
                            return(
                                <span className={this.state.scrollTo==key ? "tab-btn active" : "tab-btn"} onClick={this.switch.bind(this,key)}>
                                    {item}
                                </span>
                            )
                        }.bind(this))
                    }
                </p>
                <span className="arrow left" onClick={this.toLeft}>&lsaquo;</span>
                <span className="arrow right" onClick={this.toRight}>&rsaquo;</span>
            </div>
        )
    }
});

module.exports=Banner;